<template>
	<div class="header clearfix">
		<div class="cw clearfix">
			<div class="use-info fl clearfix">
				<span class="fl">欢迎您，</span>
				<div class="fl">
					<a href="" title="登录">登录</a>
					<span>|</span>
					<a href="" title="注册">注册</a>
				</div>
			</div>
			<ul class="top-nav clearfix">
				<li class="cut-line">|</li>
				<li class="shop-car">
					<div class="box">
						<i class="fa fa-star"></i>
						<a href="javascript:;">我的收藏</a>
						<strong>(10)</strong>
					</div>
				</li>
				<li class="cut-line">|</li>
				<li class="shop-car">
					<div class="box">
						<i class="fa fa-shopping-cart"></i>
						<a href="javascript:;">购物车</a>
						<strong>(111)</strong>
					</div>
				</li>
				<li class="cut-line">|</li>
				<li>
					<ul>
						<li>
							<a href="">合作渠道</a>
						</li>
						<li>
							<a href="">客户通道</a>
						</li>
						<li>
							<a href="">LePar</a>
						</li>
						<li>
							<a href="">销售联盟</a>
						</li>
					</ul>
				</li>
				<li class="cut-line">|</li>
				<li>
					<ul>
						<li>
							<a href="">帮助中心</a>
						</li>
						<li>
							<a href="">配送安装</a>
						</li>
						<li>
							<a href="">销售服务</a>
						</li>
						<li>
							<a href="">运费标准</a>
						</li>
						<li>
							<a href="">联系客服</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>	
	</div>
</template>

<script>
</script>

<style scoped>
	.header{
		width:100%;
		position: fixed;
		top:0;
		z-index: 99999;
		height:29px;
		line-height:28px;
		background-color: #F7F7F7;
		border-bottom:1px solid lightgrey;
		
	}
	.header .top-nav{
		float: right;
	}
	.header .top-nav ul{
		height:28px;
		overflow: hidden;
		border:1px solid transparent;
	}
	.header .top-nav ul:hover{
		height:auto;
		background: whitesmoke;
		border-color:grey;
	}
	.header a:hover{
		color:red !important;
	}
	
	.header .top-nav>li:hover .box,.header .top-nav>li:hover .box a,.header .top-nav>li:hover strong{
		color:red !important;
	}
	.box,strong{
		transition: color .2s ease;
	}
	.header a,.header span,.header strong{
		color:black;
		font-size: 12px;
	}
	.header .top-nav>li{
		cursor: pointer;
		float: left;
		width:60px;
		margin:0;
		text-align: center;
	}
	.header .top-nav>.shop-car{
		width:105px;
	}
	.header .top-nav>.cut-line{
		width:5px;
		margin:0;
		font-size: 10px;
		
	}
	
	
	
</style>